<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
                <script type="text/javascript" src="https://g.alicdn.com/code/lib/echarts/5.6.0/echarts.min.js"></script>

    
</head>
<body >
    <div id="721ee7e64d29460b84f9f2ddbfd0bd75" class="chart-container" style="width:100%; height:500px; "></div>
    <script>
        var chart_721ee7e64d29460b84f9f2ddbfd0bd75 = echarts.init(
            document.getElementById('721ee7e64d29460b84f9f2ddbfd0bd75'), 'white', {renderer: 'canvas'});
        var option_721ee7e64d29460b84f9f2ddbfd0bd75 = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "aria": {
        "enabled": false
    },
    "color": [
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc"
    ],
    "series": [
        {
            "type": "treemap",
            "name": "\u65e5\u672c\u65c5\u884c\u6838\u5fc3\u573a\u666f\u5206\u7c7b",
            "data": [
                {
                    "name": "\u4ea4\u901a\u4e0e\u5165\u5883\u573a\u666f",
                    "value": 1000,
                    "children": [
                        {
                            "name": "\u673a\u573a\u573a\u666f\n\u5165\u5883\u624b\u7eed\u3001\u884c\u674e\u63d0\u53d6\u3001\u673a\u573a\u4ea4\u901a",
                            "value": 400
                        },
                        {
                            "name": "\u516c\u5171\u4ea4\u901a\n\u5730\u94c1/\u7535\u8f66\u3001\u5df4\u58eb\u3001\u51fa\u79df\u8f66\u3001\u65b0\u5e72\u7ebf\u3001\u79df\u8f66",
                            "value": 600
                        }
                    ]
                },
                {
                    "name": "\u4f4f\u5bbf\u573a\u666f",
                    "value": 800,
                    "children": [
                        {
                            "name": "\u9152\u5e97/\u65c5\u9986\n\u5165\u4f4f\u624b\u7eed\u3001\u8bbe\u65bd\u54a8\u8be2\u3001\u95ee\u9898\u89e3\u51b3\u3001\u9000\u623f\u6d41\u7a0b",
                            "value": 400
                        },
                        {
                            "name": "\u6c11\u5bbf/Airbnb\n\u4e0e\u623f\u4e1c\u6c9f\u901a\u3001\u751f\u6d3b\u9700\u6c42",
                            "value": 200
                        },
                        {
                            "name": "\u4f20\u7edf\u65c5\u9986\n\u6587\u5316\u793c\u4eea\u3001\u7279\u8272\u670d\u52a1",
                            "value": 200
                        }
                    ]
                },
                {
                    "name": "\u9910\u996e\u573a\u666f",
                    "value": 900,
                    "children": [
                        {
                            "name": "\u9910\u5385\u7528\u9910\n\u9884\u8ba2\u9910\u5385\u3001\u70b9\u9910\u4ea4\u6d41\u3001\u7528\u9910\u793c\u4eea\u3001\u7ed3\u8d26\u652f\u4ed8",
                            "value": 400
                        },
                        {
                            "name": "\u7279\u8272\u7f8e\u98df\u4f53\u9a8c\n\u5c45\u9152\u5c4b\u3001\u62c9\u9762\u5e97\u3001\u56de\u8f6c\u5bff\u53f8\u3001\u70e4\u8089/\u706b\u9505\u5e97",
                            "value": 300
                        },
                        {
                            "name": "\u4fbf\u5229\u5e97/\u8d85\u5e02\n\u98df\u54c1\u8d2d\u4e70\u3001\u65e5\u7528\u54c1\u8d2d\u4e70",
                            "value": 200
                        }
                    ]
                },
                {
                    "name": "\u8d2d\u7269\u573a\u666f",
                    "value": 850,
                    "children": [
                        {
                            "name": "\u767e\u8d27\u5546\u573a\n\u5546\u54c1\u54a8\u8be2\u3001\u4ef7\u683c\u8bae\u4ef7\u3001\u4ed8\u6b3e\u65b9\u5f0f\u3001\u9000\u7a0e\u670d\u52a1",
                            "value": 350
                        },
                        {
                            "name": "\u7279\u8272\u5546\u5e97\n\u7535\u5668\u5e97\u3001\u836f\u5986\u5e97\u3001\u4e8c\u624b\u5e97\u3001\u4f20\u7edf\u5de5\u827a\u54c1\u5e97",
                            "value": 300
                        },
                        {
                            "name": "\u5e02\u573a/\u8857\u533a\u8d2d\u7269\n\u4f20\u7edf\u5e02\u573a\u3001\u7279\u8272\u8857\u533a",
                            "value": 200
                        }
                    ]
                },
                {
                    "name": "\u89c2\u5149\u666f\u70b9\u573a\u666f",
                    "value": 950,
                    "children": [
                        {
                            "name": "\u5386\u53f2\u6587\u5316\u666f\u70b9\n\u795e\u793e\u5bfa\u5e99\u3001\u57ce\u5821\u53e4\u8ff9\u3001\u535a\u7269\u9986/\u7f8e\u672f\u9986",
                            "value": 300
                        },
                        {
                            "name": "\u81ea\u7136\u666f\u89c2\n\u5bcc\u58eb\u5c71\u3001\u6e29\u6cc9\u3001\u516c\u56ed/\u82b1\u56ed",
                            "value": 250
                        },
                        {
                            "name": "\u73b0\u4ee3\u5a31\u4e50\n\u4e3b\u9898\u516c\u56ed\u3001\u52a8\u6f2b/\u6e38\u620f\u573a\u6240\u3001\u6f14\u51fa\u89c2\u770b",
                            "value": 200
                        },
                        {
                            "name": "\u4f53\u9a8c\u6d3b\u52a8\n\u6587\u5316\u4f53\u9a8c\u3001\u5236\u4f5c\u4f53\u9a8c\u3001\u6237\u5916\u6d3b\u52a8",
                            "value": 200
                        }
                    ]
                },
                {
                    "name": "\u7d27\u6025\u60c5\u51b5\u573a\u666f",
                    "value": 700,
                    "children": [
                        {
                            "name": "\u533b\u7597\u9700\u6c42\n\u5bfb\u627e\u836f\u5e97\u3001\u5c31\u533b\u670d\u52a1\u3001\u533b\u7597\u4fdd\u9669",
                            "value": 300
                        },
                        {
                            "name": "\u5b89\u5168\u95ee\u9898\n\u62a5\u8b66\u6c42\u52a9\u3001\u7269\u54c1\u4e22\u5931\u3001\u4ea4\u901a\u4e8b\u6545",
                            "value": 250
                        },
                        {
                            "name": "\u81ea\u7136\u707e\u5bb3\n\u5730\u9707\u5e94\u5bf9\u3001\u53f0\u98ce/\u66b4\u96e8\u3001\u7d27\u6025\u901a\u77e5\u7406\u89e3",
                            "value": 150
                        }
                    ]
                },
                {
                    "name": "\u751f\u6d3b\u670d\u52a1\u573a\u666f",
                    "value": 750,
                    "children": [
                        {
                            "name": "\u901a\u4fe1\u670d\u52a1\nSIM\u5361/WiFi\u3001\u90ae\u653f\u670d\u52a1",
                            "value": 250
                        },
                        {
                            "name": "\u91d1\u878d\u670d\u52a1\nATM\u4f7f\u7528\u3001\u8d27\u5e01\u5151\u6362\u3001\u4fe1\u7528\u5361\u95ee\u9898",
                            "value": 300
                        },
                        {
                            "name": "\u516c\u5171\u670d\u52a1\n\u516c\u5171\u5395\u6240\u3001\u5783\u573e\u5904\u7406\u3001\u884c\u674e\u5bc4\u5b58",
                            "value": 200
                        }
                    ]
                }
            ],
            "left": "center",
            "width": "80%",
            "height": "80%",
            "label": {
                "show": true,
                "position": "inside",
                "margin": 8,
                "formatter": "{b}",
                "valueAnimation": false
            },
            "upperLabel": {
                "show": true,
                "position": "inside",
                "margin": 8,
                "valueAnimation": false
            },
            "leafDepth": 1,
            "drillDownIcon": "\u25b6",
            "roam": true,
            "nodeClick": "zoomToNode",
            "zoomToNodeRatio": 0.1024,
            "colorMappingBy": "index",
            "visibleMin": 10,
            "tooltip": {
                "show": true,
                "trigger": "item",
                "triggerOn": "mousemove|click",
                "axisPointer": {
                    "type": "line"
                },
                "showContent": true,
                "alwaysShowContent": false,
                "showDelay": 0,
                "hideDelay": 100,
                "enterable": false,
                "confine": false,
                "appendToBody": false,
                "transitionDuration": 0.4,
                "formatter": function(params) {    return params.name + '<br>\u5305\u542b\u573a\u666f: ' + params.value;},
                "textStyle": {
                    "fontSize": 14
                },
                "borderWidth": 0,
                "padding": 5,
                "order": "seriesAsc"
            }
        }
    ],
    "legend": [
        {
            "data": [
                "\u65e5\u672c\u65c5\u884c\u6838\u5fc3\u573a\u666f\u5206\u7c7b"
            ],
            "selected": {},
            "show": true,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14,
            "backgroundColor": "transparent",
            "borderColor": "#ccc",
            "borderRadius": 0,
            "pageButtonItemGap": 5,
            "pageButtonPosition": "end",
            "pageFormatter": "{current}/{total}",
            "pageIconColor": "#2f4554",
            "pageIconInactiveColor": "#aaa",
            "pageIconSize": 15,
            "animationDurationUpdate": 800,
            "selector": false,
            "selectorPosition": "auto",
            "selectorItemGap": 7,
            "selectorButtonGap": 10
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "enterable": false,
        "confine": false,
        "appendToBody": false,
        "transitionDuration": 0.4,
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5,
        "order": "seriesAsc"
    },
    "title": [
        {
            "show": true,
            "text": "\u65e5\u672c\u65c5\u884c\u6838\u5fc3\u573a\u666f\u5206\u7c7b",
            "target": "blank",
            "subtarget": "blank",
            "left": "center",
            "padding": 5,
            "itemGap": 10,
            "textAlign": "auto",
            "textVerticalAlign": "auto",
            "triggerEvent": false
        }
    ]
};
        chart_721ee7e64d29460b84f9f2ddbfd0bd75.setOption(option_721ee7e64d29460b84f9f2ddbfd0bd75);
            window.addEventListener('resize', function(){
                chart_721ee7e64d29460b84f9f2ddbfd0bd75.resize();
            })
    </script>
</body>
</html>
